<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
商品名称:<input>
商品分类:<input>
<button onclick="query()">查询</button>

<table id="tbl" border="1" cellpadding="5" cellspacing="0">
    <tr><th>编号</th><th>名称</th><th>图片</th></tr>
</table>

<div>
    <span>首页</span>
    <span>上一页</span>
    <label id="pages">
    </label>
    <span>下一页</span>
    <span>尾页</span>
</div>

<script>
    function query(page){
        // 默认值 1
        page = page || 1;
        axios.get("queryProduct.s",{
            params : {
                page: page,
                size: 5
            }
        }).then(res=>{
            // 清空表格, 保留表头
            tbl.innerHTML = "<tr><th>编号</th><th>名称</th><th>图片</th></tr>";
            res.data.rows.forEach(p=>{
                let html = `<tr>
                            <td>${p.pid}</td>
                            <td>${p.pname}</td>
                            <td><img src="images/${p.image}" alt="" height="100px"></td>
                            </tr>`;
                tbl.innerHTML += html;
            });

            // 生成页码

            let total = parseInt( res.data.total );
            // 计算页数
            let p  = parseInt( total / 5 );
            p += (total % 5 == 0) ? 0 : 1;
            // 清空页面
            pages.innerHTML = "";
            for (let i = 0; i < p; i++) {
                pages.innerHTML += `<span class="${i==page-1?'select':''}" onclick="query(${i+1})">${i+1}</span>`;
            }

        });
    }
</script>

</body>
</html>

<style>
    table{
        margin-block: 10px;
        width: 100%;
    }
    input{
        width: 100px;
    }
    div{
        text-align: center;
    }
    div span{
        display: inline-block;
        background-color: #ddd;
        border: 1px #aaa solid;
        padding: 5px 10px;
        border-radius: 2px;
        cursor: pointer;
        margin: 5px;
    }
    div span.select{
        background-color: lime;
    }
    div span:hover{
        background-color: #999;
    }
</style>